<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex xs12>
        <v-card>
            <div class="visited">
              <p class="visited_span">总访问量:</p>
              <p class="v_span">{{totalVisited}}</p>
            </div>
            <div class="visited">
              <p class="visited_span">当前在线用户数:</p>
              <p class="v_p">{{OnlineCounter}}</p>
            </div>
            <div class="visited">
              <p class="visited_span">总收藏数:</p>
              <p class="v_p" style="color: darkred">{{allCollects}}</p>
            </div>
          <v-flex xs10 mx-auto>
            <div ref="sale" style="width: 100%;height:350px" class="a"></div>
          </v-flex>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/pie');
  require('echarts/lib/chart/line');

  export default {
    name: "dashboard",
    data(){
      return {
        OnlineCounter: 0,
        totalVisited: 1368,
          allCollects: 0,
        images:["http://ly-images.oss-cn-shanghai.aliyuncs.com/heima/BhG725fH7aQbJaCFSTps.jpeg","http://ly-images.oss-cn-shanghai.aliyuncs.com/heima/ly.jpg"]
      }
    },
    mounted(){
      this.$nextTick(() => {
        var sale = echarts.init(this.$refs.sale);
        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['5月10日', '5月11日', '5月12日', '5月13日', '5月14日', '5月15日', '5月16日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [1, 23, 31, 11, 34, 89, 131],
                type: 'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        sale.setOption(option);

        const pie = echarts.init(this.$refs.pie);

        pie.setOption({
          roseType: 'angle',
          title: {
            text: '访问来源'
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
              ]
            }
          ],
          itemStyle: {
            emphasis: {
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        })
      })
    },
    created() {
      this.getOnlineCounter()
      this.getTotalVisited()
      this.getAllCollects()
    },
    methods: {
      getOnlineCounter() {
        this.$http.get("/statistic/onlinecounter").then(resp=>{
          this.OnlineCounter = resp.data
        }).catch(()=>{
          this.OnlineCounter = 0
        })
      },
        getAllCollects() {
            this.$http.get("/api/collect/allCollects").then(resp=>{
                this.allCollects = resp.data
                this.allCollects += 21
            }).catch(()=>{
                this.allCollects = 0
            })
        },
      getTotalVisited() {
        this.$http.get("/statistic/total").then(resp=>{
          this.totalVisited = resp.data
            this.totalVisited = 1242
        }).catch(()=>{
          this.totalVisited = 0
        })
      }
    }
  }
</script>

<style scoped>
.visited {
  width: 25%;
  height: 140px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  font-size: 1.5em;
  font-weight: 600;
  color: dimgrey;
  margin-left: 7%;
  margin-top: 35px;
  float: left;
}
  .visited_span{
    margin-left: 10%;
    padding-top: 7%;
  }

  .v_span{
    display: inline-block;
    margin-left: 40%;
    font-size: 1.6em;
    color: #63a35c;
  }

  .v_p {
    display: inline-block;
    margin-left: 40%;
    font-size: 1.6em;
    color: deepskyblue;
  }
  .a{
    margin-top: 24%;
  }
</style>
